<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit" />
  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
  <link rel="icon" type="image/png" href="/img/app-icon72x72.png" />
  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes" />
  <link rel="icon" sizes="192x192" href="/img/app-icon72x72@2x.png" />
  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-mobile-web-app-title" content="标题" />
  <link rel="apple-touch-icon-precomposed" href="/img/app-icon72x72@2x.png" />
  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="/img/app-icon72x72@2x.png" />
  <meta name="msapplication-TileColor" content="#0e90d2" />
  <meta name="viewport" content="width=1200, user-scalable=yes">
  <title>个人设置</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <!-- /meta -->
  <script src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace.min.js"></script>
  <link href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace-theme-minimal.min.css" rel="stylesheet">
  <!--[if lte IE 9]>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  <!--[if gt IE 9]><!-->
  <script src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/jquery.3.3.1min.js"></script>
  <!--<![endif]-->
  <!-- /script -->
  <link rel="stylesheet" href="/css/main.min.css">

  <!-- /style -->
  <style>
    .v-codeBtn {
      margin-left: 0 !important;
      width: 100px !important;
      left: 387px;
      height: 40px !important;
    }

    .module-filter {
      background: transparent;
    }

    .module-filter .title {
      color: #999;
    }

    .select-area .select-area-operate {
      margin: 0;
    }

    .select-area-operate .select-area-name {
      height: 40px !important;
      line-height: 40px !important;
      background: #fff !important;
      border: 1px solid #B4B4B4 !important;
    }

    .select-area-operate .select-area-item .select-area-name .iconfont {
      top: 8px;
    }
    .volunteer-register-title .v-item {
      font-size: 24px !important;
    }
    .volunteer-register-title .v-item img{
      margin-right: 10px;
      margin-top: -5px;
    }
  </style>
</head>

<body>
  <div class="page page-volunteer-register">


    <section class="common_header_item">

      <header class="page__header">
        <div class="section__wrapper" style="width: 1220px;">
          <div class="column-inner clearfix">
            <div class="header-search">
              <!-- logo -->
              <h1 class="header-logo"><a href="/"><img src="img/poster/logo.png"  title="国家公共文化云" alt="国家公共文化云" /></a></h1>
              <!-- info user -->
              <div class="topbar-sign">
                <!-- <a class="iconfont user" href="/user-center-order.html">&#xe65f; </a>
                    <i class="separator">|</i>
                    <a href="#">1599999999</a>
                    <a href="#">退出</a> -->
                <a href="/signin.html">登录</a>
                <i class="separator">|</i>
                <a href="/signup.html">注册</a>
              </div>
              <!-- search -->
              <form class="form-header-search search-hover-active">
                <input type="text" placeholder="请输入关键字搜索" name="" id="">
                <a href="search-result.html">
                  <div class="search-button"><i class="iconfont icon-search" title="搜索">&#xe603;</i>
                  </div>
                </a>
              </form>

            </div>
          </div>
        </div>
      </header>

      <article class="section page__main_nav">
        <div class="section__wrapper" style="width: 1220px;">
          <div class="column-inner clearfix">
            <nav class="page__nav bar__inner j_follow_bar_nav">
              <li class="nav__item" data-nav="index"><span class="nav__title"><a href="index.html">首页</a></span>
              </li>
              <li class="nav__item" data-nav="news"><span class="nav__title"><a href="news.html">新闻资讯</a></span>
              </li>
              <li class="nav__item" data-nav="live"><span class="nav__title"><a href="live.html">资源点播</a></span>
              </li>
              <!-- <li class="nav__item" data-nav="ancient"><span class="nav__title"><a href="ancient-culture.html ">文化活动</a></span></li> -->
              <li class="nav__item" data-nav="activity"><span class="nav__title"><a href="activity.html">文化活动</a></span>
              </li>
              <li class="nav__item" data-nav="venue"><span class="nav__title"><a href="venue.html">场馆导航</a></span>
              </li>
              <li class="nav__item" data-nav="network"><span class="nav__title"><a href="network-train.html">网络培训</a></span>
              </li>
              <!-- <li class="nav__item" data-nav="travel"><span class="nav__title"><a href="culture-travel.html">文化旅游</a></span></li> -->
              <!-- <li class="nav__item" data-nav="heritage"><span class="nav__title"><a href="culture-heritage.html ">文化非遗</a></span></li> -->
              <!-- <li class="nav__item" data-nav="volunteer"><span class="nav__title"><a href="volunteer-event-archive.html">志愿服务</a></span></li> -->
              <!-- <li class="nav__item" data-nav="app"><span class="nav__title"><a href="#">社团管理</a></span></li> -->
              <li class="nav__item" data-nav="exhibition"><span class="nav__title"><a href="exhibition-list.html">网上展厅</a></span>
              </li>
              <span class="follow__bar"></span>
            </nav>
          </div>
        </div>
      </article>
    </section>
    <!-- /header -->
    <main class="page__container">
      <section class="section section__breadcrumb">
        <div class="section__wrapper">
          <div class="pure-u-1">
            <div class="column-inner">
              <div class="nav__breadcrumb">
                <a class="item" href="index.html">首页</a>
                <span class="separator">&gt;</span>
                <a class="item active" href="javascript:void(0)">个人设置</a> 
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- / breadcrumb -->
      <section class="section">
        <div class="module section__wrapper">
          <div class="pure-u-1-6">
            <div class="column-inner">
              <div class="page-usercenter-left">
                <div class="usercenter-user">
                  <div class="usercenter-user_portrait">
                    <p>
                      <img src="http://via.placeholder.com/108x108" class="avatar" alt="" width="108" height="108" />
                      <a class="link"><i class="iconfont">&#xe67a;</i></a>
                    </p>
                    <span>用户昵称</span>
                  </div>
                </div>
                <div class="usercenter-user_type">
                  <ul>
                    <li class="active"><a href="user-center-order.html"><i class="iconfont">&#xe677;</i>我的订单</a>
                    </li>
                    <li><a href="user-center-favorite.html"><i class="iconfont">&#xe870;</i>我的收藏</a>
                    </li>
                    <li><a href="user-center-comment.html"><i class="iconfont">&#xe606;</i>我的评论</a>
                    </li>
                    <li><a href="user-volunteer-archive.html"><i class="iconfont">&#xe647;</i>我的志愿者</a>
                    </li>
                    <li><a href="user-center-team.html"><i class="iconfont">&#xe647;</i>我的社团</a>
                    </li>
                    <li><a href="user-center-profile.html"><i class="iconfont">&#xe67a;</i>个人设置</a>
                    </li>
                    <li><a href="general-certify.html"><i class="iconfont">&#xe6c3;</i>实名认证</a>
                    </li>
                    <li><a href="#"><i class="iconfont">&#xe6eb;</i>退出</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- /user-center-left -->
          <div class="pure-u-5-6">
            <div class="column-inner">


              <!-- 个人信息 -->
              <article class="profile-module-item">

                <div class="volunteer-register-title">
                  <div class="v-item active">
                    <img src="../img/poster/register-title1.png" alt="">个人信息
                    <div class="btm"></div>
                  </div>
                </div>

                <div class="module volunteer-register_form">
                  <form id="addForm">
                    <!-- / register-wrapper_input -->
                    <div class="module register-wrapper_input register-left">
                      <span class="r-lable">

                        用户昵称：

                      </span>
                      <input type="text" class="v-register validate[required]" placeholder="请输入用户昵称" />
                    </div>
                    <!-- / register-wrapper_input -->
                    <div class="module register-wrapper_input register-right">
                      <span class="r-lable">

                        性别：

                      </span>
                      <label class="boy">
                        <input name="Fruit" type="radio" value="" checked />男 <i class="iconfont">&#xe832;</i>
                      </label>
                      <label class="girl">
                        <input name="Fruit" type="radio" value="" />女 <i class="iconfont">&#xe616;</i>
                      </label>
                    </div>
                    <div class="clear"></div>


                    <!-- / register-wrapper_input -->
                    <div class="module register-wrapper_input register-left">
                      <span class="r-lable">

                        出生年月：

                      </span>
                      <input type="date" class="v-text validate[required]">
                    </div>

                    <div class="module-filter-wrapper register-right">
                      <div class="module module-filter select-area" data-area="container">
                        <h3 class="title"><i class="iconfont icon-venue-fill"></i>居住区域 :</h3>
                        <div class="module-filter-list">
                          <div class="select-area-operate">
                            <div class="select-area-item" data-area-item="provinces">
                              <h3 class="select-area-name"><span data-area="name">选择省</span><i

                                  class="iconfont">&#xe7cf;</i></h3>
                              <ul class="select-area-panel" data-area-panel="provinces"></ul>
                            </div>
                            <div class="select-area-item" data-area-item="prefectures">
                              <h3 class="select-area-name"><span data-area="name">选择市</span><i

                                  class="iconfont">&#xe7cf;</i></h3>
                              <ul class="select-area-panel" data-area-panel="prefectures"></ul>
                            </div>
                            <div class="select-area-item" data-area-item="counties">
                              <h3 class="select-area-name"><span data-area="name">选择县</span><i

                                  class="iconfont">&#xe7cf;</i></h3>
                              <ul class="select-area-panel" data-area-panel="counties"></ul>
                            </div>
                          </div>
                        </div>
                      </div>


                    </div>
                    <div class="clear"></div>
                    <!-- / register-wrapper_input -->
                    <div class="module register-wrapper_input">
                      <span class="r-lable">

                        地 址：

                      </span>
                      <input type="text" style="width:98% !important" class="v-register validate[required]" placeholder="请输入地址" />
                    </div>
                    <!-- / register-wrapper_input -->

                    <!-- / register-wrapper_input -->
                    <div class="module register-wrapper_input">
                      <span class="r-lable">

                        个⼈简介：

                      </span>
                      <textarea name="" id="" style="width: 98% !important;height: 200px;" class="v-register validate[required]" placeholder="请输入个⼈简介"></textarea>
                    </div>
                    <!-- / register-wrapper_input -->
                    <div class="module register-wrapper_btn">
                      <span class="v-itemBtn submit j_submit">提交</span><span class="v-itemBtn reset">重置</span>
                    </div>
                  </form>
                </div>
              </article>



              <!-- 修改手机 -->
              <article class="profile-module-item">



                <div class="volunteer-register-title">
                  <div class="v-item active ">
                    <img src="../img/poster/register-title2.png" alt="">修改手机号码
                    <div class="btm"></div>
                  </div>
                </div>
                <div class="volunteer-register_form">
                  <form id="addForm_phone">
                    <!-- / register-wrapper_input -->
                    <div class="module register-wrapper_input register-left">
                      <span class="r-lable">

                        当前手机号码：

                      </span>
                      <input type="text" class="v-text validate[required,custom[phone]]" placeholder="请输入当前手机号码" />
                    </div>
                    <!-- / register-wrapper_input -->
                    <div class="module register-wrapper_input register-right">
                      <span class="r-lable">

                        新手机号码：

                      </span>
                      <input type="text" class="v-text validate[required,custom[phone]]" placeholder="请输入新手机号码" />
                    </div>
                    <div class="clear"></div>
                    <!-- / register-wrapper_input -->
                    <div class="module register-wrapper_input register-left">
                      <span class="r-lable">

                        图形验证码：

                      </span>
                      <input type="text" class="v-text validate[required]" placeholder="请输入图形验证码" />
                      <img class="codes" src="http://via.placeholder.com/100x38" width="100" height="38" alt="">
                    </div>
                    <div class="module register-wrapper_input register-right">
                      <span class="r-lable">

                        手机验证码：

                      </span>
                      <input type="text" class="v-text validate[required]" placeholder="请输入手机验证码" />
                      <input type="text" class="v-codeBtn" value="发送验证码" />
                    </div>
                    <div class="clear"></div>
                    <!-- / register-wrapper_input -->
                    <div class="module register-wrapper_btn">
                      <span class="v-itemBtn submit j_submit__phone">提交</span><span class="v-itemBtn reset">重置</span>
                    </div>
                  </form>
                </div>

              </article>

              <!-- 修改密码 -->
              <article class="profile-module-item">
                <div class="volunteer-register-title">
                  <div class="v-item active ">
                    <img src="../img/poster/register-title3.png" alt="">修改密码
                    <div class="btm"></div>
                  </div>
                </div>
                <div class="volunteer-register_form">
                  <form id="addForm_password">
                    <div class="clearfix module register-wrapper_input register-left">
                      <span class="r-lable"> 当前密码：</span>
                      <input type="password" class="v-text  validate[required]" placeholder="请输入密码" />
                      <span class="iconfont r-seePassword">&#xe6b1;</span>
                    </div>
                    <!-- / register-wrapper_input -->
                    <div class="clearfix module register-wrapper_input register-right">
                      <span class="r-lable">设置新密码：</span>
                      <input type="password" class="v-text  v__validate_password validate[required,minSize[8],maxSize[20],custom[onlyLetterNumberTester]" placeholder="请输入新密码" />
                      <span class="iconfont r-seePassword">&#xe6b1;</span>
                    </div>
                    <div class="clear"></div>
                    <!-- / register-wrapper_input -->
                    <div class="clearfix module register-wrapper_input register-right" style="float: right;">
                      <span class="r-lable"> 确认新密码：</span>
                      <input type="password" class="v-text v__validate_aginpassword  validate[required,minSize[8],maxSize[20],custom[onlyLetterNumberTester]" placeholder="请确认密码" />
                      <span class="iconfont r-seePassword">&#xe6b1;</span>
                    </div>
                    <div class="clear"></div>
                    <!-- / register-wrapper_input -->
                    <div class="module register-wrapper_btn">
                      <span class="v-itemBtn submit j_submit__password">提交</span><span class="v-itemBtn reset">重置</span>

                    </div>
                  </form>
                </div>
              </article>




            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="page__footer">
      <section class="footer-main">
        <div class="section__wrapper footer-top">
          <div class="footer-r">
            <img src="../img/footer-logo/fool-logo.png" alt="">
            <div class="region">
              <span>热线：192832083</span>
              <span>地址：黑龙江省哈尔滨市通河县松花江大街23号正西方向90米</span>
            </div>
            <div class="relation">
              <span>邮箱：192832083s33f</span>
              <span>传真：192832083s33f</span>
            </div>
          </div>
          <div class="footer-middle">
            <div class="middle-title">友情链接</div>
            <div class="middle-href">
              <a href="#">国家公共文化云</a>
              <a href="#">中国数字文化网</a>
              <a href="#">哈尔滨市文化和旅游厅</a>
            </div>
            <div class="middle-href">
              <a href="#">国家公共文化云</a>
              <a href="#">中国数字文化网</a>
              <a href="#">哈尔滨市文化和旅游厅</a>
            </div>
          </div>
          <div class="footer-qr">
            <img src="../img/footer-logo/qr.png" alt="">
            <div class="qr-title">官方微信</div>
          </div>
        </div>
      </section>
      <section class="footer-bot-main">
        <div class="section__wrapper footer-bot">
          版权所有Copyright © 2020通河县文化与旅游厅 黑ICP备XXXXXXXXXX号
        </div>
      </section>
    </footer>
    <!-- / footer -->
  </div>
  <!-- /page -->

  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/underscore-min-1.8.3/underscore-min.js"></script>
  <script src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/bowser.min.js"></script>
  <script src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.jquery.min.js"></script>
  <link href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.min.css" rel="stylesheet">
  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/layer-3.0.3/layer.min.js"></script>



  <!-- 前端交互脚本 -->
  <script src="js/common/xtab.js"></script>
  <script src="js/common/xbar.js"></script>
  <script src="js/common/util.js"></script>

  <script src="js/app.js"></script>
  <script src="/js/common.min.js"></script>

  <!-- /script -->
  <script src="js/Validation/js/jquery.validationEngine-zh_CN.js"></script>
  <script src="js/Validation/js/jquery.validationEngine.js"></script>
  <!-- 时间选择器 -->
  <script src="lib/laydate/laydate.js"></script>
  <script src="js/common/gb2260.js"></script>
  <script src="js/common/hs-area.js"></script>
</body>
<script>
  $(document).ready(function () {

    // 地址联动操作
    var myArea = new hs.area({

    });
    myArea.init();

    // 时间选择器
    lay('#version').html('-v' + laydate.v);

    //执行一个laydate实例
    laydate.render({
      elem: '#test1' //指定元素
    });

    // 自定义参数调用
    $('#addForm').validationEngine('attach', {
      promptPosition: 'topRight',
      scroll: false
    });

    //倒计时
    $('.v-codeBtn').on('click', function () {
      var codeNo = $(this);
      time(codeNo);
    })
    //个人信息点击提交
    $('.j_submit').on('click', function () {
      var data = $('#addForm').validationEngine('validate');
    });
    //修改手机号码提交
    $('.j_submit__phone').on('click', function () {
      var data = $('#addForm_phone').validationEngine('validate');
    });

    // 修改密码提交
    $(".j_submit__password").on("click", function () {
      var data = $('#addForm_password').validationEngine('validate');
      var password = $('.v__validate_password').val();
      var passwordAgin = $('.v__validate_aginpassword').val();
      console.log(password, passwordAgin, "asdasdasd")
      if (password != passwordAgin) {
        alert('两次密码输入不一致');
        return;
      }
    })

    // 查看密码
    $(".r-seePassword").on("click", function () {
      $(this).toggleClass("seeTrue")
      if ($(this).hasClass("seeTrue")) {
        $(this).html("&#xe62e;")
        $(this).parent().find("input").attr("type", "text")
      } else {
        $(this).html("&#xe6b1;")
        $(this).parent().find("input").attr("type", "password")
      }
    })

    var wait = 60;
    function time(t) {
      if (wait == 0) {
        $(t).attr("disabled", false);
        $(t).val("获取验证码");
        wait = 60;
      } else {
        $(t).attr("disabled", true);
        t.val(wait + "秒重发送");
        wait--;
        setTimeout(function () {
          time(t);
        }, 1000);
      }
    }
  });
</script>

</html>